import React, {useState, useEffect} from 'react'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { baseURL } from '../../axios'

export default function WangEditor(props) {
  // 富文本编辑器逻辑
  const [editor, setEditor] = useState(null) // 存储 editor 实例

  const toolbarConfig = {}
  const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {}
  }
  editorConfig.MENU_CONF['uploadImage'] = {
    // 上传图片的配置
    server: `${baseURL}/upload`,
    // 上传之前触发
    onBeforeUpload(file) {
      // file 选中的文件，格式如 { key: file }
      return file

      // 可以 return
      // 1. return file 或者 new 一个 file ，接下来将上传
      // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress) {
      // progress 是 0-100 的数字
      console.log('progress', progress)
    },
    // 单个文件上传成功之后
    onSuccess(file, res) {
      console.log(`${file.name} 上传成功`, res)
    },
    // 单个文件上传失败
    onFailed(file, res) {
      console.log(`${file.name} 上传失败`, res)
    },
    // 上传错误，或者触发 timeout 超时
    onError(file, err, res) {
      console.log(`${file.name} 上传出错`, err, res)
    },
  }

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return
      editor.destroy()
      setEditor(null)
    }
  }, [editor])
  return (
    <>
      <div style={{ position: 'relative', border: '1px solid #ccc',  ...props.style}}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid #ccc' }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={props.content}
          onCreated={setEditor}
          onChange={editor => props.getHtml(editor.getHtml())}
          mode="default"
          style={{  height: '300px' }}
        />
        {
          props?.disabled && 
          <div style={{
            position: 'absolute',left: 0,right: 0,bottom: 0,top: 0,background: 'rgba(0,0,0,.3)',
            color: '#fff',display: 'flex',alignItems: 'center',justifyContent: 'center'
          }}>
            请登录后再发表言论
          </div>
        }
      </div>
    </>
  )
}
